<template>
  <div class="application_box">
    <!-- 这里是主要内容 -->
    <div class="content">
      <router-view></router-view>
    </div>

    <!-- 这里是页脚 - 导航栏 -->
    <div class="footer">
      <van-tabbar class="shadow"
                  v-model="active">
        <van-tabbar-item replace
                         to="home"
                         icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace
                         to="talk"
                         icon="search">热门话题</van-tabbar-item>
        <van-tabbar-item replace
                         to="order_detail"
                         icon="friends-o">订单流程</van-tabbar-item>
        <van-tabbar-item replace
                         to="prepare"
                         icon="setting-o">婚前筹备</van-tabbar-item>
        <van-tabbar-item replace
                         to="my_info"
                         icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'ApplicationView',
  data () {
    return {
      loading: false,
      active: 0,
    }
  },
  created () {
    var nav_active = this.$route.params.nav_active
    console.log("nav_active = " + nav_active)
    if (nav_active != null) {
      this.active = nav_active
    } else {
      console.log("nav_active = undefined")
      console.log("path = " + this.$route.path.split("/")[2]);
      switch (this.$route.path.split('/')[2]){
        case "home" : this.active = 0;
            break;
        case "talk" : this.active = 1;
          break;
        case "order_detail" : this.active = 2;
          break;
        case "prepare" : this.active = 3;
          break;
        case "my_info" : this.active = 4;
          break;
        
      }
    }
  },

  components: {

  },
  
}
</script>
<style lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.application_box {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.shadow {
  box-shadow: 0px 0px 3px #646566;
}
.content {
  margin-bottom: 50px;
}
.footer {
  position: fixed;
  bottom: 0;
}
</style>
